<!--
Copyright 2025 Google LLC

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OSS Fuzz Gen Trends Report</title>
    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400..600;1,400..600&display=swap" rel="stylesheet" />
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Trends Report</h1>
    <section>
      <button id="filters-toggle" class="filters-toggle">
        <span class="material-symbols-outlined">filter_alt</span>
        Filters
      </button>
      <div id="filters" class="filters" style="display: none;">
        <div>
          <h3>Date Range</h3>
          <select id="date-range-filter">
            <option value="all" selected>all</option>
            <option value="7">7 days</option>
            <option value="14">14 days</option>
            <option value="30">30 days</option>
            <option value="60">60 days</option>
            <option value="90">90 days</option>
            <option value="120">120 days</option>
            <option value="180">180 days</option>
          </select>
        </div>
        <div>
          <h3>LLM models</h3>
          <div id="llm-filter">
            <input type="text" placeholder="Start typing to filter" />
          </div>
        </div>
        <div>
          <h3>Benchmark sets</h3>
          <div id="benchmark-filter">
            <input type="text" placeholder="Start typing to filter" />
          </div>
        </div>
        <div>
          <h3>Tags</h3>
          <div id="tag-filter">
            <input type="text" placeholder="Start typing to filter" />
          </div>
        </div>
      </div>
    </section>
    <section>
      <h2>Overview</h2>
      <div id="overview-chart" class="chart"></div>
      <div id="overview-table"></div>
      <h2>Projects</h2>
      <div id="overview-coverage-chart" class="chart"></div>
      <div id="projects" class="projects"></div>
      <h3 id="project-header"></h3>
      <h4>Coverage</h4>
      <div id="project-coverage-chart" class="chart"></div>
      <div id="project-coverage-table"></div>
      <h4>Build Rate</h4>
      <div id="project-build-chart" class="chart"></div>
      <h4>Crash Rate</h4>
      <div id="project-crash-chart" class="chart"></div>
    </section>
    <section>
      <h1>Links</h1>
      <ul id="links"></ul>
    </section>
    <div class="loading-shadow-box" id="loading">
      <span class="material-symbols-outlined">progress_activity</span>
    </div>
    <script defer src="d3.min.js"></script>
    <script defer src="plot.min.js"></script>
    <script defer src="index.js"></script>
  </body>
</html>
